<template>
<div class="layout">
    <Layout>
        <Header>
            <div class="title">青岛港UPS在线监测系统</div>
            <div class="role" @click="LoginOut()">你好，<span id="roleName">{{$store.state.CookieInfo.roleName}}</span>&ensp;&ensp;<Icon type="ios-log-out" style="font-size: 24px;" id="out" /></div>
        </Header>
        <Layout>
            <Content :style="{padding: '24px', minHeight: '280px'}">
                <!-- <router-view /> -->
                <Row>
                    <Col span="8" class="cardBox" v-for="(item,index) in equipmentList" :key="'equipmentList' + index">
                        <Card style="width:450px;height:250px; background: rgba(36, 64, 95, 0.74);border:0;">
                            <div class="card-tiem basicData">
                                <Col span="7">门机号：<span>{{item.gateNumber}}</span></Col>
                                <Col span="9">UPS编号：<span>{{item.deviceCode}}</span></Col>
                                <Col span="8">IP：<span>{{item.equipmentIp}}</span></Col>
                            </div>
                                <div class="card-tiem voltageParameter">
                                    <Col span="6">I/P电压<p>{{item.input_voltage || 0}}V</p></Col>
                                    <Col span="6">O/P电压<p>{{item.output_voltage || 0}}V</p></Col>
                                    <Col span="6">I/P故障电压<p>{{item.input_fault_voltage || 0}}V</p></Col>
                                    <Col span="6">O/P电流<p>{{item.output_current || 0}}</p></Col>
                                </div>
                                <div class="card-tiem voltageParameter">
                                    <Col span="6">I/P频率<p>{{item.input_frequency || 0}}HZ</p></Col>
                                    <Col span="6">电池电压<p>{{item.battery_voltage || 0}}V</p></Col>
                                    <Col span="6">温度<p>{{item.temperature || 0}}℃</p></Col>
                                    <Col span="6">
                                    UPS状态
                                      <Poptip style="width:100%;" placement="bottom" trigger="hover" title="UPS状态" :content="item.ups_state || '无状态'">
                                          <Button type="text" size="small"><p class="UPS" style="color:#fdd588;">{{item.ups_state || '无状态'}}</p>
                                      </Button>
                                      </Poptip>
                                      </Col>
                                </div>
                            <div class="card-tiem basicData">
                                <Col span="24">设备厂家单位：<span>{{item.manufacturer}}</span></Col>
                            </div>
                        </Card>
                    </Col>
                </Row>
            </Content>
            <Sider hide-trigger style="">
                <Menu :active-name="activeName" theme="dark" width="auto" @on-select="selectChange" ref="side_menu">
                    <MenuItem :name="item.cId"  v-for="(item,index) in orgList" :key="'orgList' + index">
                        <!-- <Icon type="md-people" /> -->
                        <span>{{item.companyName}}</span>
                    </MenuItem>
                </Menu>
                
            </Sider>
        </Layout>
        <!-- <Footer>Footer</Footer> -->
    </Layout>
</div>
</template>
<script>
import Cookies from "js-cookie";
export default {
  data() {
    return {
      orgList: [],
      equipmentList: [],
      activeName: null
    };
  },
  created() {
    this.getOrgList();
    this.warningNotice();
  },
  methods: {
    //选择单位
    selectChange(name) {
      this.equipmentData(name);
      this.activeName = name;
    },
    equipmentMonitoring(cId) {
      this.sockets = null;
      let _this = this;
      this.sockets = new WebSocket(`ws://192.168.0.105:8080/webSocket/${cId}`);
      this.sockets.onopen = function() {
        // console.log("连接成功");
      };
      this.sockets.onmessage = function(event) {
        
        let data = JSON.parse(event.data)[0];
        if (data) {
          _this.equipmentList.map((item, index) => {
            if (item.eId == data.e_id) {
              let obj = Object.assign(item, {}, data);
              // console.log(obj);
              _this.$set(_this.equipmentList, index, obj);
            }
          });
        }
      };
    },
    equipmentData(cId) {
      let _this = this;
      this.$ajax
        .get("http://192.168.0.100:8083/EquipmentController/findDevice", {
          params: {
            cId
          }
        })
        .then(res => {
          // console.log(res);
          if (res.data.code == 200) {
            this.equipmentList = res.data.dataList;
            this.equipmentMonitoring(cId);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getOrgList() {
      this.$ajax
        .get("http://192.168.0.100:8083/CompanyController/findCompany", {
          params: {
            uId: this.$store.state.CookieInfo.uId
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            if (!(res.data.dataList instanceof Array)) {
              this.$set(this.orgList, 0, res.data.dataList);
              this.activeName = this.orgList[0].cId;
            } else {
              this.orgList = res.data.dataList;
              this.activeName = this.orgList[0].cId;
            }
            this.$nextTick(() => {
              this.$refs.side_menu.updateOpened();
              this.$refs.side_menu.updateActiveName();
              this.equipmentData(this.activeName);
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    warningNotice() {
      let _this = this;
      this.sockets = new WebSocket(
        `ws://192.168.0.105:8080/webSocket/Warning/${
          this.$store.state.CookieInfo.uId
        }`
      );
      this.sockets.onopen = function() {
        // console.log("连接成功");
      };
      this.sockets.onmessage = function(event) {
        let item = JSON.parse(event.data);
        _this.$Notice.warning({
          title: "预警通知",
          desc:
            item.c_name +
            "的IP为：" +
            item.ip +
            "在" +
            item.warnring_time +
            "，异常信息：" +
            item.error
        });
      };
      this.sockets.spend = function() {};
    },
    LoginOut() {
      Cookies.remove("userMessage");
      this.$router.replace({
        path: "/"
      });
    }
  },
  mounted() {}
};
</script>
<style scoped>
.UPS {
  width: 100px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.UPS:hover {
  color: #000 !important;
}
#out:hover {
  color: #f00;
}
.card-tiem {
  /* border-bottom: 1px solid #e5e5e5; */
  border-bottom: 1px solid rgba(229, 229, 229, 0.52);
  background: rgba(255, 255, 255, 0);
}
.card-tiem > div {
  padding: 2px;
  /* background: rgba(255, 255, 255, 0.4); */
}
.voltageParameter {
  padding: 6px;
  line-height: 28px;
  height: 70px;
  color: #4ff1c5;
  /* color: #57a3f3; */
}
.voltageParameter p {
  font-weight: bold;
}
.basicData {
  padding: 4px;
  line-height: 10px;
  height: 30px;
  color: #efc67a;
}
.basicData:nth-child(4) {
  height: 35px;
  line-height: 50px;
  border: 0;
}
.cardBox {
  text-align: center;
  margin-bottom: 20px;
}
/* ========================================================== */
.layout {
  height: 100%;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.ivu-layout {
  width: 100%;
  height: 100vh;
  background: url(../../static/img/download1.jpg) no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.container-layout {
  height: 100%;
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.ivu-layout-header {
  background: rgba(26, 50, 76, 0.74);
  color: #fff;
  text-shadow: 0 8px 10px #000;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 30px;
}
.ivu-menu-dark {
  background: rgba(0, 0, 0, 0);
}
.ivu-layout-sider {
  background: rgba(26, 50, 76, 0.74);
  box-shadow: 0 10px 34px #1d1818bd;
}
.ivu-menu-item {
  background: rgba(0, 0, 0, 0);
  border: 1px solid #e5e5e5;

  border-radius: 15px;
  margin: 12px;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 10px 24px;
  color: gray;
}

.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu),
.ivu-menu-dark.ivu-menu-vertical
  .ivu-menu-item-active:not(.ivu-menu-submenu):hover,
.ivu-menu-dark.ivu-menu-vertical
  .ivu-menu-submenu-title-active:not(.ivu-menu-submenu),
.ivu-menu-dark.ivu-menu-vertical
  .ivu-menu-submenu-title-active:not(.ivu-menu-submenu):hover {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #e5e5e5;
  box-shadow: 1px 1px 1px gray;
  margin: 2px;
  padding: 10px 24px;
  color: #fff;
  text-shadow: 0 0 1px yellow;
  font-weight: bold;
}
.title {
  display: inline-block;
  position: absolute;
  left: 30px;
  font-size: 18px;
  font-size: 25px;
  font-weight: bold;
  font-family: "-webkit-pictograph";

  text-shadow: 0 8px 10px #000;
}
.role {
  display: inline-block;
  position: absolute;
  right: 50px;
  font-size: 15px;
  cursor: pointer;
}
.ivu-layout-sider-children {
  background: rgba(206, 214, 230, 0.65) !important;
}
</style>